<template>
  <div class="charts-wrapper">
    <!-- 5个饼图容器 -->
    <div class="chart-grid">
      <div ref="chartRefs" class="chart-item" v-for="i in 5" :key="i"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  data() {
    return {
      productList: [], // 所有商品数据（10条）
      chartInstances: [], // 5个饼图实例
      currentGroup: 0, // 当前显示的分组（0：第1组，1：第2组）
      timer: null // 切换定时器
    };
  },
  methods: {
    // 获取接口数据
    async getData() {
      const { data } = await axios.get("http://124.223.9.151:9012/api/stock.json");
      this.productList = data; // 存储10条商品数据
      this.initCharts(); // 初始化5个图表
      this.startAutoSwitch(); // 启动自动切换
    },

    // 初始化5个饼图实例
    initCharts() {
      // 获取5个容器DOM
      const chartDoms = this.$refs.chartRefs;
      // 初始化每个实例并存储
      this.chartInstances = chartDoms.map((dom, index) => {
        const chart = echarts.init(dom);
        // 初始渲染第1组数据（currentGroup=0时的对应索引）
        this.updateChart(chart, this.getProductIndex(index));
        return chart;
      });
    },

    // 更新单个饼图数据
    updateChart(chart, productIndex) {
      if (!this.productList[productIndex]) return;

      const product = this.productList[productIndex];
      // 单张饼图数据（库存vs销量）
      const pieData = [
        { name: '库存', value: product.stock },
        { name: '销量', value: product.sales }
      ];

      // 饼图配置
      const option = {
        title: {
          text: product.name, // 标题显示商品名
          x: 'center',
            y: 'center',
          textStyle: { fontSize: 10, color: '#fff' }
        },
        
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c}'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'], // 环形饼图
            label: {
              show: false,
            },
            data: pieData,
            itemStyle: {
                 color:{
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0.5,
                  colorStops: [
                    { offset: 0, color: '#30D355' },
                    { offset: 1, color: '#5153EE' }
                  ],
                 }
            },

            // 切换动画
            animationDuration: 1000
          }
        ]
      };

      chart.setOption(option);
    },

    // 根据当前分组和图表索引，计算对应商品的索引
    getProductIndex(chartIndex) {
      // 第1组：0-4 → 对应商品索引0-4；第2组：0-4 → 对应商品索引5-9
      return this.currentGroup * 5 + chartIndex;
    },

    // 切换到下一组
    switchGroup() {
      this.currentGroup = this.currentGroup === 0 ? 1 : 0; // 切换分组（0↔1）
      // 更新5个饼图数据
      this.chartInstances.forEach((chart, index) => {
        const productIndex = this.getProductIndex(index);
        this.updateChart(chart, productIndex);
      });
    },

    // 启动自动切换（每5秒一次）
    startAutoSwitch() {
      this.timer = setInterval(() => {
        this.switchGroup();
      }, 5000);
    }
  },
  mounted() {
    this.getData();

    // 窗口resize时调整所有图表
    window.addEventListener('resize', () => {
      this.chartInstances.forEach(chart => chart.resize());
    });
  },
  beforeDestroy() {
    // 清理定时器和图表实例
    clearInterval(this.timer);
    this.chartInstances.forEach(chart => chart.dispose());
  }
};
</script>

<style scoped>
.charts-wrapper {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* 5张饼图网格布局 */
.chart-grid {
  display: flex;

  flex-wrap: wrap; /* 适配小屏幕自动换行 */
}

.chart-item {
  width: 33%; /* 5个平均分配宽度 */
  height: 120px;
 /* 最小宽度，避免过小 */
}

/* 响应式调整：屏幕较小时每行显示2-3个 */
/* @media (max-width: 1200px) {
  .chart-item {
    width: calc(33.33% - 14px);
  }
}

@media (max-width: 768px) {
  .chart-item {
    width: calc(50% - 10px);
  } */

</style>